<div id="projectleft" style="width:20%;float:left;margin-right:10px;">
    <div id="project_tools_content" class="container">

        <div class="smallCategory">Endpoints</div>
        <div id="project_endpoints">
        </div>

        <div class="smallCategory">Test Suites</div>
        <div id="project_test_suites">
        </div>
    </div>
</div>
<div id="projectcontent" style="width:76%;float:left;" class="container">content</div>
<div style="clear:both;"></div>


<script>
    
    setContentName(projectName);
    
    post("project", {"method":"projectDetails",  "projectName":projectName}, populateProjectInfos);
    
    
    function getEndpointDetails(selendpoint) {
    	endpoint = selendpoint;
    	post("project", {"method":"endpointDetails",  "projectName":projectName, "endpoint": endpoint}, renderProjectContent);
    }
    
 
    function renderProjectContent(data) {
  		endpointConfiguration = data;
  		loadId("projectcontent","project/projectconfig");
 
    	
    }

    function populateProjectInfos(data) {
        for (var index in data.pe) {        	
        	$("#project_endpoints").append("<div class='clickable' onclick='getEndpointDetails(\""+data.pe[index]+"\")'>"+data.pe[index]+"</div>");
        }
    }
</script>